import React, { useState, useEffect, useRef } from "react"
import './index.css'
import { Button, Input, Space, Table, Switch, Modal, Form } from 'antd';
import { PieChartTwoTone, EditTwoTone, DeleteTwoTone } from '@ant-design/icons';
import axios from "../../../../../util/axios";
const { Search } = Input;
const Headlist = () => {
    const [list, setList] = useState([])//总数据
    const idvalue = useRef()//key的ref
    const luxianvalue = useRef()//luxian的ref
    const namevalue = useRef()//name的ref
    const telvalue = useRef()//tel的ref
    const cityvalue = useRef()//city的ref
    const jinweivalue = useRef()//jinwei的ref
    const [visible, setVisible] = React.useState(false);//弹框的现实隐藏
    const [confirmLoading, setConfirmLoading] = React.useState(false);//弹框确定的lodaing
    const [state, setState] = useState()//回显的状态
    const [title, setTitle] = useState('')//弹框的标题
    const [form] = Form.useForm();//form
    //useEffect
    useEffect(
        () => {
            getlist()//调用getlist获取总数据渲染到试图
        }, []
    )
    //调用接口
    const getlist = () => {
        axios.get('/colonereude').then(res => {
            setList(res.data.data)
        })
    }
    //表格标题
    const columns = [
        {
            title: '路线',
            dataIndex: 'luxian',
        },
        {
            title: '联系人姓名',
            dataIndex: 'name',
        },
        {
            title: '联系人电话',
            dataIndex: 'tel',
        },
        {
            title: '仓库地址',
            dataIndex: 'city',
        },
        {
            title: '经纬度',
            dataIndex: 'jinwei',
        },
        {
            title: '团长人数',
            dataIndex: 'ren',
        },
        {
            title: '状态',
            dataIndex: 'lls',
            render: (text, record) => (
                <Switch defaultChecked={text === "true" ? true : false} disabled />
            )
        },
        {
            title: '操作',
            render: (text, record) => (
                <Space size="small">
                    <PieChartTwoTone />
                    <EditTwoTone onClick={() => { edit(text, record) }} />
                    <DeleteTwoTone onClick={() => { del(text, record) }} />
                </Space>
            ),
        },
    ]
    //搜索框
    const onSearch = (value) => {
        axios.get('/colonereudesou', { params: { name: value } }).then(res => {
            console.log(res.data.data, `${value}，搜素之后的数据`);
            setList(res.data.data)
        })
    }
    //增加
    const add = () => {
        setVisible(true);
        setTitle('增加')
        console.log(luxianvalue.current)

    }
    //编辑
    const edit = (text, record) => {
        setVisible(true);
        console.log(record, '要编辑的那条数据');
        form.setFieldsValue({ ...record })

        setState(record.lls)
        setTitle('编辑')
    }
    //删除
    const del = (text, record) => {
        axios.get('/colonereudeDel', { params: { id: record.id } })
        getlist()
    }
    //弹框的确定
    const handleOk = () => {
        setConfirmLoading(true);
        setTimeout(() => {
            setVisible(false);
            setConfirmLoading(false);
        }, 2000);
    };
    //弹框的取消
    const handleCancel = () => {
        setVisible(false);
    };
    return (
        <div className="way">
            {/* title */}
            <div className="way_title">
                <div className="left">
                    <Button type="primary" onClick={() => { add() }}>新增</Button>
                </div>
                <div className="right">
                    <Search placeholder="请输入名称" onSearch={onSearch} enterButton />
                </div>
            </div>
            <div className="way_table">
                {/* table */}
                <div className="tableall">
                    <Table columns={columns} dataSource={list} bordered={true} pagination={{ pageSize: 8 }} rowKey='id' />
                </div>
                {/* link弹框 */}
                <div className="link">
                    <Modal title={title} visible={visible} onOk={handleOk} confirmLoading={confirmLoading} onCancel={handleCancel}>
                        <Form form={form}>
                            <Form.Item label="编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号" name="id">
                                <Input ref={idvalue} disabled />
                            </Form.Item>
                            <Form.Item label="仓&nbsp;库&nbsp;名&nbsp;称" name="luxian">
                                <Input ref={luxianvalue} />
                            </Form.Item>
                            <Form.Item label="联系人姓名" name="name">
                                <Input ref={namevalue} />
                            </Form.Item>
                            <Form.Item label="联系人电话" name="tel">
                                <Input ref={telvalue} />
                            </Form.Item>
                            <Form.Item label="仓&nbsp;库&nbsp;地&nbsp;址" name="city">
                                <Input ref={cityvalue} />
                            </Form.Item>
                            <Form.Item label="经&nbsp;&nbsp;&nbsp;纬&nbsp;&nbsp;&nbsp;度" name="jinwei">
                                <Input ref={jinweivalue} />
                            </Form.Item>
                            <Form.Item label="状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态">
                                <Switch checked={state === "true" ? true : false} disabled />
                            </Form.Item>
                        </Form>
                    </Modal>
                </div>
            </div>
        </div>
    )
}
export default Headlist
